<template>
  <div>
    <div>
      <LianxiOne
        v-for="(item, index) in list"
        :key="index"
        :obj="item"
        @like="likeFn"
      ></LianxiOne>
      <h3>你喜欢的狗如下:</h3>
      <ul>
        <li v-for="(item, index) in likedList" :key="index">{{ item }}</li>
      </ul>
    </div>
    <div></div>

    <hr />

    <div>
      <table>
        <LianxiTwo
          v-for="(item, index) in goodsArr"
          :key="index"
          :obj="item"
          @add="item.count = $event - 0"
        ></LianxiTwo>
      </table>
      <p>总数为: {{ Sum }}</p>
    </div>

    <hr />

    <div>
      <h3>商品清单如下</h3>
      <ul>
        <li v-for="(item, index) in foodsList" :Key="index">
          {{ item.shopName }} {{ item.price }} 元 / 份
        </li>
      </ul>
      <h3>请选择购买数量</h3>
      <LianxiThree
        v-for="(item, index) in foodsList"
        :key="index"
        :obj="item"
        @add="item.count = $event"
        @reduce="item.count = $event"
      ></LianxiThree>
      <p>总价为：{{ total }}</p>
    </div>

    <hr />

    <div>
      <shop-car :goodList="goodList">
        <template #head>
          <th><input type="checkbox" v-model="all" /> <span>全选</span></th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </template>
        <template #main="{ item, index }">
          <td><input type="checkbox" v-model="item.checked" /></td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="even(index, '0')">-</button>{{ item.num
            }}<button @click="even(index, '1')">+</button>
          </td>
          <td>{{ item.price * item.num }}</td>
          <td><button @click="del(index)">删除</button></td>
        </template>
        <template #foot>
          <td>合计:{{ totalAll }}</td>
          <td colspan="5"></td>
        </template>
      </shop-car>
    </div>

    <div>
      <h3>测试题</h3>
      <div>
      <MySubject
        v-for="(item, index) in arr"
        :key="index"
        :obj="item"
        @tijiao="item.result = $event"
      ></MySubject>
    </div>
    <div>
      <MyFlag v-for="(item, index) in arr"
        :key="index"
        :obj="item"
        :index ="index"
        ></MyFlag>
    </div>
    </div>
  </div>
</template>

<script>
import LianxiOne from "@/components/LianxiOne.vue";
import LianxiTwo from "@/components/LianxiTwo.vue";
import LianxiThree from "@/components/LianxiThree.vue";
import ShopCar from "@/components/ShopCar.vue";
import MySubject from "@/components/MySubject.vue";
import MyFlag from "@/components/MyFlag.vue";
export default {
  created() {
    const arr = [];
    for (let i = 0; i < 5; i++) {
      const left = Math.floor(Math.random() * 11);
      const right = Math.floor(Math.random() * 11);
      arr.push({ left, right, result: null });
    }
    this.arr = arr;
    // console.log(this.arr)
  },
  components: {
    LianxiOne,
    LianxiTwo,
    LianxiThree,
    ShopCar,
    MySubject,
    MyFlag
  },
  props: {},
  data() {
    return {
      list: [
        {
          dogImgUrl:
            "http://nwzimg.wezhan.cn/contents/sitefiles2029/10146688/images/21129958.jpg",
          dogName: "博美",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=2872058027,2680745347&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=449",
          dogName: "泰迪",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=467567320,141065619&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=287",
          dogName: "金毛",
        },
        {
          dogImgUrl:
            "https://img0.baidu.com/it/u=3200238064,331094530&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=564",
          dogName: "哈士奇",
        },
        {
          dogImgUrl:
            "https://img1.baidu.com/it/u=3238697659,2429015315&fm=253&fmt=auto&app=138&f=JPEG?w=330&h=350",
          dogName: "阿拉斯加",
        },
        {
          dogImgUrl:
            "https://img1.baidu.com/it/u=1383390785,4213593903&fm=253&fmt=auto&app=138&f=JPEG?w=593&h=450",
          dogName: "萨摩耶",
        },
      ],
      likedList: [],
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
      foodsList: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
      arr: [],
    };
  },
  computed: {
    Sum() {
      return this.goodsArr.reduce((sum, item) => {
        return sum + item.count;
      }, 0);
    },
    total() {
      return this.foodsList.reduce((sum, item) => {
        return sum + item.count * item.price;
      }, 0);
    },
    totalAll() {
      return this.goodList.reduce(
        (sum, item) => (sum += item.price * item.num),
        0
      );
    },
    all: {
      get() {
        return this.goodList.every((item) => item.checked === true);
      },
      set(value) {
        return this.goodList.forEach((item) => (item.checked = value));
      },
    },
  },
  watch: {},
  methods: {
    likeFn(name) {
      this.likedList.push(name);
    },
    even(id, flag) {
      if (flag === "1") {
        this.goodList[id].num++;
      } else {
        if (this.goodList[id].num > 0) {
          this.goodList[id].num--;
        } else {
          this.goodList[id].num = 0;
        }
      }
    },
    del(id) {
      this.goodList.splice(id, 1);
    },
  },
};
</script>

<style scoped></style>
